<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>气象站</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.4/themes/icon.css">

    <!--<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>-->
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/moment.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>
    <script type="text/javascript" src="../js/angular-1.5.8/angular.min.js" ></script>
    <script type="text/javascript" src="js/pub.js" ></script>
    <script type="text/javascript">
        var ls = [];
        var app = angular.module('ws', []);
        app.controller('mulchart', function ($scope, $timeout) {
            
        });
    
        $.ajaxSetup({  
            async : false  
        }); 
    
        var btn_index = 1;
        var d_id = 1;
        $(function () {
            $("#dt").datetimebox("setValue", moment().format("YYYY-MM-DD HH:mm:00"));
             
            $.get("mul.json", function (data) {
                ls = eval(data);
                $('#sel').combobox({  
                    multiple:true,
                    data:ls,    
                    valueField:'value',    
                    textField:'name'   
                });  
            });
            
            $("#sel").change(function () {
                chart_ref();
            });
            $("#sel2").change(function () {
                chart_ref();
            });
            btn_click(5);
            loop();
            
            $('#sel').combobox({ 
                onChange:chart_ref 
            });
        });
        
        function loop(){
            btn_t(99);
            
            setTimeout("loop()", 60 * 1000);
        }

        function show_chart(lab, dat, tit, unit) {
            var opt = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    zoomType: 'x'
                },
                title: {
                    text: tit, //'树莓派气象站',
                    x: -20 //center
                },
                colors: ['#EE7600', '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
                subtitle: {
                    text: 'w_p_ <?php echo date("Y-m-d H:i:s") ?>',
                    x: -20
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories: lab,
                    tickInterval: Math.round(lab.length / 10) // 10
                },
                yAxis: {
                    title: {
                        text: tit//'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: unit // '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: dat 
                /*[{
                    name: tit, //'ds12b80温度',
                    //data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    data: dat
                }] */
            }
            dataChart = new Highcharts.Chart(opt);
        }

        function btn_t(i) {
            if (i == 99) {
                var dt2 = new moment();
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));                
            } else {
                var t_add = $("#sel2").find("option:selected").val();
                var dt1 = $("#dt").datetimebox("getValue");
                var dt2 = new moment(dt1);
                var i_t = i * Number(t_add);
                dt2 = dt2.add(i_t, "hours");
                $("#dt").datetimebox("setValue", dt2.format("YYYY-MM-DD HH:mm:00"));               
            }
            chart_ref();
        }

        function btn_click(i) {
            btn_index = Number(i);
            chart_ref();
        }
        function chart_ref() {
            $("#down").empty();
            var dt = $("#dt").datetimebox("getValue");
            var ids = $("#sel").combobox("getValues");
            log(ids);
            var dat = [];
            var t = "";
            for(i = 0; i < ids.length; i++){
                //if(window.console) console.log(ids[i]);
                var id   = ids[i];
                j = 0;
                for(j=0; j < ls.length; j++){
                    if(ls[j].value == id)
                        break;
                }
                
                var tit  = ls[j].oth;
                var key  = ls[j].key;
                var mac  = ls[j].mac;
                var unit = ls[j].unit;
                var diff = ls[j].diff;
                //log(id + ', ' + tit);
                d_id = id;
                t += tit + " "
                key = mac == '' ? key : key + '-' + mac;
                $.get("main.php", {cmd: "getdata", key: key, t: btn_index, id: id, dt: dt, tit:tit, id_temp: Math.random()}, function (data) {
                    data = eval("(" + data + ")");
                    if (data.error.length > 0)
                        alert(data.error);
                    //$("#down").attr("href", data.f);
                    //$("#down").append("下载数据：" + data.f);
                    
                    log(tit + "," + key + "," + diff);
                    if(diff != 0){
                        for(k = 0; k < data.dat.length; k++){
                            data.dat[k] = data.dat[k] + diff;
                        }
                    }
                    
                    var dat1 = {
                        name: data.tit, 
                        data: data.dat
                    };
                    dat.push(dat1);
                    //show_chart(data.lab, data.dat, tit, unit);
                    if (dat.length == ids.length) {
                        if(window.console) console.log('show chart');
                        show_chart(data.lab, dat, t, unit);
                        
                    }
                })
                
            }

        }
        
        function btn_click_mul(){
            window.location.href = "indexII.php";
        }
    </script>
</head>
<body ng-app="ws" ng-controller="mulchart">
<div>
    <select id="sel" class="easyui-combobox" data-options="multiple:true,valueField:'id',textField:'name',url:'mul.php'" style="width:250px;">
    </select>
    <input id="dt" type="text" class="easyui-datetimebox">
    <select id="sel2">
        <option value="1">1h</option>
        <option value="3">3h</option>
        <option value="6">6h</option>
        <option value="12">12h</option>
        <option value="24">1d</option>
        <option value="72">3h</option>
        <option value="168">1w</option>
    </select>
    <input type="button" value="now" onclick="btn_t(99)">
    <input type="button" value="<-" onclick="btn_t(-1)">
    <input type="button" value="->" onclick="btn_t(1)">
    <input type="button" value="1h" onclick="btn_click(1)">
    <input type="button" value="3h" onclick="btn_click(2)">
    <input type="button" value="6h" onclick="btn_click(3)">
    <input type="button" value="12h" onclick="btn_click(4)">
    <input type="button" value="1d" onclick="btn_click(5)">
    <input type="button" value="3d" onclick="btn_click(6)">
    <input type="button" value="1w" onclick="btn_click(7)">
    <input type="button" value="1m" onclick="btn_click(8)">
    <input type="button" value="all" onclick="btn_click(9)">
    <!--<input type="button" value="多图表显示" onclick="btn_click_mul()">-->
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div style="font-size:small; ">
    <br>
    <!--<a id="down" href="#" target="_blank">下载数据</a><br>-->
    <!--<a href="weather_src.zip" target="_blank">下载源码: weahter_src.zip</a><br>-->
    <br>

    <div style="color:#8E8E8E"> 开发平台: raspberry+nginx+php
        &nbsp;&nbsp;&nbsp;&nbsp;
        mail: 287378376@qq.com
    </div>
</div>
</body>
</html>
